<template>
  <div id="city-box">
    <div class="bg-box" :style="{backgroundImage:'url('+cityBgUrl+')'}">
      <div class="top mask">{{chartData.cityname}}</div>
      <div class="bottom mask">
        <span class="index-tip agency_fb">{{!chartData.index?'-':cur_index_type=='01'?parseFloat(chartData.index).toFixed(2):parseFloat(chartData.index).toFixed(1)}}<span class="small-tip" v-if="cur_index_type!='01'">%</span></span>
        <hr class="middle-hr">
        <span class="base-tip">
          {{indexName}}
        </span>
      </div>
      <div class="left mask">
        <span class="value agency_fb">{{chartData.ranking}}</span>
        <hr>
        <span class="base-tip">拥堵排名</span>
      </div>
      <div class="right mask">
        <span class="right-tip">km/h</span><br>
        <span class="value agency_fb">{{chartData.speed?parseFloat(chartData.speed).toFixed(1):'-'}}</span>
        <hr>
        <span class="base-tip">全网均速</span>
      </div>
      <div class="circle" id="circle-chart">

      </div>
      <!--<div class="circle">-->
        <!--<div class="circle-right circle-bg"></div>-->
      <!--</div>-->
      <!--<div id="circle" class="circle circle-color" :style="{clipPath:clipStyle}">-->
        <!--<div class="circle-right"></div>-->
      <!--</div>-->
    </div>
    <div class="box" v-if="cur_state === 'real'">
      <ChartBox title="昨日环比" :offset="chartData.yestOffset?chartData.yestOffset:tempData" :percent="chartData.yestOffsetPercent?chartData.yestOffsetPercent:tempData"/>
      <ChartBox title="上周同比" :offset="chartData.weekOffset?chartData.weekOffset:tempData" :percent="chartData.weekOffsetPercent?chartData.weekOffsetPercent:tempData"/>
      <ChartBox title="近一月月均" :offset="chartData.monthOffset?chartData.monthOffset:tempData" :percent="chartData.monthOffsetPercent?chartData.monthOffsetPercent:tempData"/>
    </div>
    <div class="box" v-if="cur_state === 'history'">
      <ChartBox title="上年同比" :offset="chartData.yearchange?chartData.yearchange:tempData"  :percent="chartData.yearpercent?chartData.yearpercent:tempData"/>
      <ChartBox title="上月环比" :offset="chartData.monthchange?chartData.monthchange:tempData"  :percent="chartData.monthpercent?chartData.monthpercent:tempData" v-if="history_type === 'month'"/>
      <ChartBox title="上月环比" class="disabled" :offset="100"  :percent="0" v-if="history_type === 'year'"/>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import ChartBox from './ctrl/ChartBox.vue'
  import DateTimeHelper from '../../util/datetime-helper';
  import eventBus from '../../util/event-bus'
  import MYCONF from '../../myconf'
  export default {
    name: 'CityBox',
    data () {
      return {
        clipStyle: 'polygon(90px 90px, -90px 90px, 90px -90px,180px 0, 135px 45px, 90px 90px)',
        tempData:100,
        indexName:'延时指数',
        circleChart:null,
        colorSet:[{
          offset: 0, color: '#ff003b' // 0% 处的颜色
        }, {
          offset: 0.1, color: '#ff6312' // 100% 处的颜色
        }, {
          offset: 0.4, color: '#fadc50' // 100% 处的颜色
        }, {
          offset: 0.6, color: '#64e60d' // 100% 处的颜色
        }, {
          offset: 0.8, color: '#64e60d' // 100% 处的颜色
        }, {
          offset: 1, color: '#3baa14' // 100% 处的颜色
        }],
        value1:1.5,
        value2:0.5,
        value3:2,
        cityBgUrl:'./static/images/city/110000.png'
      }
    },
    props: {
      chartData: {
        type: Object
      },
    },
    mounted(){
      this.circleChart = echarts.init(document.getElementById('circle-chart'));
      this.$nextTick(() => {
        this.setIndexOption();
        this.initCircleChart();
      });
      eventBus.$on('updateGlobalIndex',() => {
        this.setIndexOption();
        this.initCircleChart();
      });
    },
    computed: {
      ...mapGetters(['cur_city', 'cur_state', 'index_max', 'cur_index_type','history_type','cur_city_code']),
    },
    components: {
      ChartBox,
    },
    methods: {
      ...mapMutations(['updateCurCity']),
      setClipStyle(){
        let indexMax = parseFloat(this.index_max).toFixed(1);
        let curIndex = parseFloat(this.cur_city.index);
        let circleX;
        let circleY;
        if (curIndex && curIndex > indexMax / 2) {
          circleX = 180 * curIndex / indexMax;
          circleY = 180 * curIndex / indexMax - 90;
          this.clipStyle = circleX > 90?`polygon(90px 90px, -90px 90px, 90px -90px,180px 0, ${circleX}px ${circleY-90}px, 90px 90px)`:`polygon(90px 90px, -90px 90px, 90px -90px,0 0, ${circleX-90}px ${circleY}px, 90px 90px)`;
        } else {
          circleX = 180 * curIndex / indexMax;
          circleY = 90 - 180 * curIndex / indexMax ;
          this.clipStyle = circleX > 90?`polygon(90px 90px, -90px 90px, 90px -90px,180px 0, ${circleX}px ${circleY-90}px, 90px 90px)`:`polygon(90px 90px, -90px 90px, 90px -90px,0 0, ${circleX-90}px ${circleY}px, 90px 90px)`;
        }
      },
      setIndexOption(){
        let indexMax = parseFloat(this.index_max).toFixed(1);
        let curIndex = parseFloat(this.cur_city.index);
        let indexRange = MYCONF.DELAY_RANGE;
        switch (this.cur_index_type) {
          case '01':
            indexRange = MYCONF.DELAY_RANGE;
            break;
          case '02':
            indexRange = MYCONF.JAM_RANGE;
            break;
          case '03':
            indexRange = MYCONF.SPACE_RANGE;
            break;
          default:
            indexRange = MYCONF.DELAY_RANGE;
            break;
        }
        this.value1 = curIndex;
        if(curIndex <= indexRange[0]){
          this.value2 = curIndex * 4 + indexRange[0] - curIndex;
          this.colorSet = [{
            offset: 0, color: '#4eff23'
          }, {
            offset: 0.3, color: '#64e60d'
          }, {
            offset: 0.6, color: '#64e60d'
          }, {
            offset: 0.8, color: '#52ae0d'
          }, {
            offset: 1, color: '#297611'
          }];
        }else if(curIndex > indexRange[0] && curIndex <= indexRange[1]){
          this.value2 = curIndex * 2 + indexRange[0] - curIndex;
          this.colorSet = [{
            offset: 0, color: '#c8ff0d'
          }, {
            offset: 0.3, color: '#9fff3c'
          }, {
            offset: 0.6, color: '#64e60d'
          }, {
            offset: 0.8, color: '#52ae0d'
          }, {
            offset: 1, color: '#297611'
          }];
        }else if(curIndex > indexRange[1] && curIndex <= indexRange[2]){
          this.value2 = curIndex * 0.8 + indexRange[1] - curIndex;
          this.colorSet = [{
            offset: 0, color: '#ffbe11'
          }, {
            offset: 0.3, color: '#fadc50'
          }, {
            offset: 0.6, color: '#64e60d'
          }, {
            offset: 0.8, color: '#52ae0d'
          }, {
            offset: 1, color: '#297611'
          }];
        }else if(curIndex > indexRange[2] && curIndex <= indexRange[3]){
          this.value2 = curIndex * 0.7 + indexRange[2] - curIndex;
          this.colorSet = [{
            offset: 0, color: '#ff6312'
          }, {
            offset: 0.3, color: '#fadc50'
          }, {
            offset: 0.6, color: '#64e60d'
          }, {
            offset: 0.8, color: '#52ae0d'
          }, {
            offset: 1, color: '#297611'
          }];
        }else{
          this.value2 = curIndex * 0.6 + indexRange[3] - curIndex;
          this.colorSet = [{
            offset: 0, color: '#ff003b'
          }, {
            offset: 0.1, color: '#ff6312'
          }, {
            offset: 0.4, color: '#fadc50'
          }, {
            offset: 0.6, color: '#64e60d'
          }, {
            offset: 0.8, color: '#52ae0d'
          }, {
            offset: 1, color: '#297611'
          }];
        }
        this.value3 = this.value1 + this.value2;
      },
      initCircleChart(){
        let option = {
          tooltip: {
            show:false,
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          animation: true,
          legend: {
            show:false,
            orient: 'vertical',
            x: 'left',
            data:['指数','','']
          },
          series: [
            {
              name:'',
              type:'pie',
              radius: ['50%', '72%'],
              startAngle:180,
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              animation: true,
              data:[
                {
                  value:this.value1,
                  name:'指数',
                  itemStyle:{
                    normal:{
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: this.colorSet,
                        globalCoord: false // 缺省为 false
                      }

                    }
                  }},
                {
                  value:this.value2,
                  name:'',
                  itemStyle:{
                    normal:{
                      color:'rgba(0, 0, 0, 0.5)',

                    }
                  }
                },
                {
                  value:this.value3,
                  name:'',
                  itemStyle:{
                    normal:{
                      color:'rgba(0,0,0,0)'

                    }
                  }
                }
              ]
            }
          ]
        };
        this.circleChart.setOption(option);
      }
    },
    watch: {
      cur_city(curVal, oldVal){
        if (curVal != oldVal) {
          this.setIndexOption();
          this.initCircleChart();
        }
      },
      cur_index_type(curVal, oldVal){
        if (curVal != oldVal){
          switch (curVal) {
            case '01':
              this.indexName = '延时指数';
              break;
            case '02':
              this.indexName = '拥堵里程比例';
              break;
            case '03':
              this.indexName = '时空拥堵指数';
              break;
            default:
              this.indexName = '延时指数';
              break;
          }
          this.setIndexOption();
          this.initCircleChart();
        }
      },
      cur_city_code(curVal, oldVal){
        if (curVal != oldVal) {
          this.cityBgUrl = './static/images/city/'+this.cur_city_code+'.png'
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  #city-box {
    padding: 0 7px;
    min-height: 200px;
    .bg-box {
      position: relative;
      height: 176px;
      background-repeat: no-repeat;
      background-position: center;
      margin: 7px 0 4px;
      -webkit-transition: all 0.6s ease;
      transition: all 0.6s ease;
      &:after{
        position: absolute;
        z-index: 10;
        left: 0;
        top: 176px;
        display: block;
        width: 390px;
        height: 176px;
        background-color: rgba(0, 0, 0, 0.6);
        content: attr(data-text);
        -webkit-transition: all 1s ease;
        transition: all 1s ease;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
      }
      .circle {
        width: 260px;
        height: 260px;
        border-radius: 50%;
        position: absolute;
        top: 20px;
        left: 64px;
        z-index: 100;
        &.circle-color {
          clip-path: polygon(90px 90px, -90px 90px, 90px -90px, 180px 0, 135px 45px, 90px 90px);
          transition: all ease 0.5s;
        }
      }
      .circle-right {
        width: 100%;
        height: 50%;
        float: right;
        background: linear-gradient(to right, #44bd07, #5bc007, #f0d208, #f64200, #ff003b);
        &.circle-bg {
          background: rgba(0, 0, 0, 0.51);
        }
      }
      .mask {
        position: absolute;
        text-align: center;
        z-index: 100;
        &.top {
          width: 100%;
          top: 10px;
          left: 0;
          text-align: center;
          font-size: 22px;
        }
        &.bottom {
          bottom: 10px;
          left: 0;
          width: 100%;
          text-align: center;
          .middle-hr {
            width: 90px;
            margin-left: 148px;
          }
        }
        &.left {
          bottom: 26px;
          left: 20px;
        }
        &.right {
          bottom: 26px;
          right: 20px;
        }
        .right-tip {
          font-size: 10px;
          opacity: 0.4;
        }
        .value {
          font-size: 32px;
        }
        .base-tip {
          font-size: 12px;
          opacity: 0.6;
        }
        .index-tip {
          font-size: 44px;
          .small-tip{
            font-size: 18px;
            opacity: 0.6;
          }
        }
      }
    }
    .box {
      height: 60px;
      display: flex;
      .disabled{
        opacity: 0.8;
      }
    }
  }
</style>
